<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>记账本</title>
    <link rel="stylesheet" href="/stylesheets/list.css">
</head>

<body>
    <header>
        <div class="nav">
            <div class="out">
                <form action="/logout" method="post">
                    <button><strong>退出</strong></button>
                </form>

            </div>
            <h1>记账本</h1>
            <h2><a href="/account/add">添加账单</a></h2>
        </div>
    </header>
    <main>
        <div class="transaction">
            <% accounts.forEach(item=> { %>
                <div class="date">
                    <%= moment(item.date).format('YYYY-MM-DD') %>
                </div>
                <div class="row">
                    <div class="description">
                        <%= item.item%>
                    </div>
                    <div class="type <%= item.type === 1 ? 'shou-ru' : 'zhi-chu' %>">
                        <%= item.type===1 ? "收入" : "支出" %>
                    </div>
                    <div class="amount">
                        <%= item.amount%>
                    </div>
                    <div class="remove">
                        <a id="remove" href="/account/<%= item._id %>">
                            ×
                        </a>
                    </div>
                </div>
                <% }) %>
        </div>

    </main>
    <footer>
        <p>&copy; 2023 记账本. All rights reserved.</p>
    </footer>

    <script>
        document.addEventListener('click', handleDelete);

        function handleDelete(event) {
            if (event.target.id != 'remove') return;

            let isDelete = confirm('您确定要删除文档吗??');

            if (!isDelete) {
                event.preventDefault();
            }
        }
    </script>
</body>

</html>